<template lang="html">
  <div ref="artcile">
    <van-nav-bar title="文章详情" left-arrow @click-left="$router.go(-1)">
    </van-nav-bar>
    <div class="detail_main" ref="main">
      <div class="main" >
        <div class="article_title">{{ articleDe.title }}</div>
        <van-image round width="2.5rem" height="2.5rem" :src="articleDe.aut_photo" />
        <div class="aricle_main">
          <span class="art_name">{{ articleDe.aut_name }}</span>
          <span class="pub_time">{{ articleDe.pubdate }}</span>
          <div class="guan_button" v-if="!articleDe.is_followed">
            <van-button icon="plus" type="primary" plain color="#007bff" size="small" @click="changeIs(true)">关注
            </van-button>
          </div>
          <div class="guan_button" v-else>
            <van-button type="primary" color="#007bff" size="small" @click="changeIs(false)">已关注</van-button>
          </div>
          <div class="article_content" v-html="articleDe.content"></div>
        </div>
      </div>
      <div class="end">
        <div class="end_text">end</div>
        <div class="like_button">
          <van-button icon="good-job-o" type="primary" color="#ff0000" plain size="small"
            v-if="articleDe.attitude === -1" @click="islikeFn(1)">点赞</van-button>
        </div>
        <div class="like_button">
          <van-button icon="good-job-o" type="primary" color="#ff0000" size="small" v-if="articleDe.attitude === 1"
            @click="islikeFn(-1)">已点赞</van-button>
        </div>
      </div>
      <div>
        <commentList @getTotalCount="getTotal"></commentList>
      </div>
      <div class="pub_comm" v-if="isShowInput === false">
        <div class="pub_comm_content" @click="getInput">发表评论</div>
        <div class="pub-ico">
          <van-icon name="comment-o" size="0.57333333333333335rem" :badge="totalCountCom > 99 ? 99 + '+' : totalCountCom" @click="scrollBttomFn"/>
        </div>
        <div class="pub-ico">
         <van-icon name="star-o" size="0.57333333333333335rem"/>
        </div>
        <div class="pub-ico">
          <van-icon name="share-o" size="0.57333333333333335rem"/>
        </div>
      </div>
      <div class="pub_comm_input" v-else>
        <textarea class="pub_comm_content" v-model="pubContent" v-focus></textarea>
        <button @click="aIshow">发布</button>
      </div>
    </div>
  </div>
</template>
<script>
import commentList from './components/commentList.vue'
import { Notify } from 'vant'
export default {
  name: 'articleDetail',
  components: { commentList },
  data () {
    return {
      articleDe: {},
      isShowInput: false,
      pubContent: '',
      totalCount: 0,
      timer: null
    }
  },
  computed: {
    totalCountCom () {
      const total = this.totalCount === 0 ? '' : this.totalCount
      return total
    }
  },
  methods: {
    async changeIs (isC) {
      // console.log(this.articleDe.aut_id)
      try {
        if (isC) {
          await this.$API.reqFloowed({ atuId: this.articleDe.aut_id })
        } else {
          await this.$API.reqNoFloowed({ atuId: this.articleDe.aut_id })
        }
        this.articleDe.is_followed = isC
      } catch (error) {
        Notify({ type: 'danger', message: '出错了' })
      }
    },
    // 点赞
    async islikeFn (islike) {
      try {
        if (islike === 1) {
          await this.$API.reqlike({ artId: this.articleDe.art_id })
        } else {
          this.$API.reqNolike({ artId: this.articleDe.art_id })
        }
      } catch (error) {
        Notify({ type: 'danger', message: '出错了' })
      }
      this.articleDe.attitude = islike
    },
    getInput () {
      this.isShowInput = true
      const artcile = this.$refs.artcile
      const h = artcile.scrollHeight || document.body.scrollHeight
      console.log(h)
      this.$nextTick(() => {
        window.scrollTo(0, h)
      })
    },
    // 发表评论
    async aIshow () {
      this.isShowInput = false
      try {
        if (this.pubContent.trim() !== '') {
          const res = await this.$API.reqPubCommnet({ target: this.$route.query.id, content: this.pubContent })
          // 重新获得评论列表
          this.pubContent = ''
          this.$bus.$emit('getNewComm', res.data.data.new_obj)
          this.totalCount++
        } else {
          Notify({ type: 'danger', message: '请输入评论内容' })
        }
      } catch (error) {
        console.log(error)
      }
    },
    getTotal (tc) {
      this.totalCount = tc
    },
    scrollBttomFn () {
      const main = this.$refs.main
      this.timer = setInterval(() => {
        console.log(main.scrollTop)
        console.log(main.clientHeight)
        console.log(main.scrollHeight)
        if (main.scrollTop + main.clientHeight === main.scrollHeight) {
          clearInterval(this.timer)
          this.timer = null
        }
        main.scrollTop += 200
      }, 50)
    }
  },
  async created () {
    try {
      const res = await this.$API.reqAticleDetail({ id: this.$route.query.id })
      this.articleDe = res.data.data
    } catch (error) {

    }
  }
}
</script>
<style lang="less" scoped>
.detail_main
{
  height:95vh;
  overflow: scroll;
  width: 100vw;
   .main
{
    margin: 10px 0 6px 0px;
    .article_title{
        font-size: 21px;
        font-weight: bold;
        margin-bottom: 10px;
        margin-left: 6px;
    }
    /deep/.van-image
    {
      margin-left: 6px;
    }
    .aricle_main{
        position: relative;
    .art_name{
        position: absolute;
        font-size: 17px;
        left: 100px;
        top:-90px;
        margin-left: 15px;
    }
    .pub_time{
      position: absolute;
      font-size: 15px;
      margin-left: 15px;
      left: 100px;
      top:-60px;
    }
    .guan_button{
      position: absolute;
      right: 10px;
      top:-85px;
    }
    .article_content{
        margin-top: 15px !important;
        border-top: 1px solid #007bff;
        margin-right: 0;
        font-size: 16px;
        width: 375px;
        }
    }
}
.end{
  position: relative;
  margin-bottom: 100px;
  margin-top:50px;
  .end_text{
    font-size: 20px;
    color: #ccc;
    position:absolute;
    left: 50%;
    top:-30px;
    transform: translateX(-15px);
  }

  .like_button
  {
   position:absolute;
   left: 50%;
   transform: translateX(-40px);
  }
   /deep/.van-button--small{
     width: 80px;
   }
}

   .pub_comm{
    height: 30px;
    line-height: 30px;
    position:fixed;
    display: flex;
    // 避免被其他元素覆盖，使用fiexd的优先级比较低
    z-index: 9999;
    bottom: 2px;
    align-items: center;
    margin-left: 22px;
    background-color:#007bff;
    border-radius: 5px;
    .pub_comm_content{
    height: 30px;
    width: 200px;
    padding-left: 5px;
    margin-right: 15px;
    border-radius: 5px;
    font-size: 14px;
    }
    .pub-ico{
      margin-right: 15px;
    }
    /deep/.van-icon-star-o{
      // padding-top: 1px;
      margin-bottom: 6px;
    }
   }
   .pub_comm_input{
    display: flex;
    padding: 5px 10px 3px 10px;
    justify-content: center;
    textarea{
      height: 80px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 20px;
      background-color: #F3F4F7;
    }
    button{
     border: none;
     background-color: #fff;
     color: #007bff;
     margin-left: 15px;
     font-size: 19px;
    }
   }
}

</style>
